<template>
    <el-menu  class="el-menu-vertical-demo" background-color="#33aef0" text-color="#fff" active-text-color="#ffd04b" :collapse='collaMenu' >
     
      <!-- <h5 v-show="!collaMenu">管理系统</h5> -->
      <h5>Bob</h5>
      <el-menu-item :index="item.path" v-for="(item, index) in hasNoChildren" :key="item.path" @click="categoryShow(item)">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
      </el-menu-item>
    <!-- 在computed属性里可以先把有子对象的对象筛选出来，在进行各自的渲染 -->
    <el-submenu index="index" v-for="(item, index) in hasChildren" :key="item.name">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item :index="subItem.path" v-for="(subItem, index) in item.children" :key="subItem.path" @click="categoryShow(subItem)">
        {{ subItem.name }}
      </el-menu-item>
    </el-submenu>
    </el-menu>
</template>

<script>
export default {
  computed: {
    //找到有子对象的对象
    hasChildren() {
      return this.addMenu.filter(e => e.children)
    },
    //寻找没有子对象的对象，并返回一个数组
    hasNoChildren() {
      return this.addMenu.filter(e => !e.children)
    },
    collaMenu(){
      return this.$store.state.tab.collaMenu;
    }
  },
  data() {
    return {
      addMenu: [
        {
          path: '/',
          name: '首页',
          label: 'home',
          icon: 'el-icon-s-home'
        },
        {
          path: '/vedio',
          name: '视频管理',
          label: 'vedio',
          icon: 'el-icon-video-play'
        },
        {
          path: '/user',
          name: '用户管理',
          label: 'user',
          icon: 'el-icon-user'
        },
        {
          name: '其他',
          label: 'other',
          icon: 'el-icon-location',

          children: [
            {
              path: 'other1',
              name: '其他1',
              label: 'other1'
            },
            {
              path: 'other2',
              name: '其他2',
              label: 'other2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    categoryShow(item) {
      //对侧边栏的选中的属性进行路由跳转，并且将选中的属性展示在header和content中
      //.catch(err => err)是为了对点击2次路由报错的解决方法
      this.$router.push(item.label).catch(err => err);
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="scss" scoped>

.el-menu{
  height: 100%;
  border: none;
  
    h5{
    color:white;
    text-align: center;
    line-height: 48px;
  }
}
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 230px;
     min-height: 400px;
    
  }
</style>
